<template>
  <div class="el-scroll-box">
    <el-scrollbar ref="wrapperScroll">
      <sticky ref="sticky" :z-index="10" class-name="sub-navbar" :sticky-top="60">
        <div class="page-title-wrap" />
      </sticky>

      <div class="page-content">
        <el-row :gutter="10">
          <el-col :span="17">
            <div class="search-box">
              <div class="question-search-box">
                <!-- <input v-model="searchParams.keyWord" type="text" placeholder="搜索您关注的问题" @blur="getListData"> -->
                <el-input v-model="searchParams.keyWord" class="m-input" placeholder="搜索您关注的问题" clearable @clear="getListData" @blur="getListData" />
                <i class="icon el-icon-search" style="cursor: pointer" />
              </div>
              <button class="question-ask-btn" @click="$router.push({ name: 'AskQuestions', params: { id: `new_${Global.getGuid()}}` } })">我要提问</button>
            </div>
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane v-for="item in typeList" :key="item.id" :label="item.name" :name="item.name">
                <template v-if="listData.length">
                  <ul style="min-height:500px" @click="toDetail">
                    <li v-for="it in listData" :key="it.id">
                      <div
                        class="answerNum"
                        :style="{color:it.replyNum!=='0'?'#fff':'#aaa',backgroundColor: it.replyNum!=='0'?'rgba(61, 109, 234, .5)':'#f4f5f5'}"
                      >
                        <span>{{ it.replyNum }}</span>
                        <span>回答</span>
                      </div>
                      <div class="questionInfo">
                        <span class="articleTitle" :data-id="it['id']">{{ it.title }}</span>
                        <span>
                          <font-icon class="icon-gerenzhongxin" />
                          <span style="margin-right:5px">{{ it.userName }}</span>
                          <font-icon class="icon-shijian" />
                          <span style="margin-right:5px">{{ it.createTime }}</span>
                          <font-icon class="icon-yanjing" />
                          <span>{{ it.hot }}浏览量</span>
                        </span>
                      </div>
                    </li>
                  </ul>
                  <div style="display: flex;align-items: center;justify-content: center">
                    <pagenation :params="pageData" />
                  </div>
                </template>
                <!-- 暂无数据 -->
                <empty-data v-else text="暂无数据" />
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="6">
            <div class="hot-card">
              <h4 style="margin:10px 0">热门问题</h4>
              <template v-if="weekHotList.length">
                <p v-for="(it,idx) in weekHotList" :key="it.id" class="hot-list" @click="$router.push({name: 'QuestionDetail', params:{id:it.id}})">
                  <svg-icon v-if="iconClassHot[idx]" :icon-class="iconClassHot[idx]" style="margin-right:5px" />
                  <span v-else class="hot-pre">{{ idx+1 }}</span>
                  <span class="page-title">{{ it.title }}</span>
                  <span class="page-view">
                    <font-icon class="icon-yanjing" />
                    <span>{{ it.hot }}</span>
                  </span>
                </p>
              </template>
              <!-- 暂无数据 -->
              <empty-data v-else text="暂无数据" />
            </div>
            <div class="reply-card">
              <h4 style="margin:10px 0">回帖达人榜</h4>
              <template v-if="replyHotList.length">
                <ul>
                  <li v-for="(item,idx) in replyHotList" :key="item.id" class="reply-list">
                    <span class="page-title">
                      <svg-icon v-if="iconClassHot[idx]" :icon-class="iconClassHot[idx]" style="margin-right:5px" />
                      <span v-else class="hot-pre">{{ idx+1 }}</span>
                      <span>{{ item.userName }}</span>
                    </span>
                    <span class="page-view">
                      <font-icon class="icon-huifu" />
                      <span>{{ item.replyNum }}</span>
                    </span>
                  </li>
                </ul>
              </template>
              <!-- 暂无数据 -->
              <empty-data v-else text="暂无数据" />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { getCommunityList, getCommunityType, RPAGetUserWeekly, RPAGetReplyWeekly } from '@/api/blog'
import EmptyData from '@/components/EmptyData'
import Sticky from '@/components/Sticky'
import Global from '../../../public/js/global'
export default {
  name: 'QuestionCenter',
  components: {
    EmptyData,
    Sticky
  },
  data() {
    return {
      Global,
      searchParams: {
        keyWord: '',
        pageNum: 0,
        pageSize: 10
      },
      pageData: {
        pageNum: 1,
        pageSize: 10,
        sizeChange: () => {},
        currentChange: () => {}
      },
      activeName: '全部',
      listData: [], // 帖子列表
      allListData: [], // 帖子列表
      typeList: [], // 分类列表
      replyHotList: [], // 回帖周榜
      weekHotList: [], // 本周热议
      iconClassHot: ['icon-diyi', 'icon-dier', 'icon-disan']
    }
  },
  watch: {
    activeName() { // tab改变获取列表
      this.listData = []
      // this.searchParams.keyWord = ''
      this.pageData.pageNum = 1
      this.pageData.pageSize = 10
      this.getListData()
    }
  },
  async created() {
    await this.getTypeList()
  },
  activated() {
    this.getListData()
    // 获取右边数据
    this.getReplyHot()
    this.getUserHot()
  },
  mounted() {
    // 监听滚动事件
    this.wrapperScroll()
  },
  methods: {
    // 获取类型列表
    getTypeList() {
      return new Promise((res, rej) => {
        const vPar = new this.ParamArr()
        getCommunityType(vPar).then(vPar => {
          const nodes = []
          const table = new this.SQLTable(vPar.getTable('k_shop_forumtype'))
          table.first()
          while (!table.eof()) {
            const node = {}
            node['id'] = table.getValueByName('ID')
            node['name'] = table.getValueByName('Name')
            node['desc'] = table.getValueByName('Desc')
            nodes.push(node)
            table.next()
          }
          nodes.unshift({ id: 0, name: '全部', desc: '全部' })
          this.typeList = nodes
          this.activeName = nodes[0].name
          res()
        })
      })
    },
    // 获取帖子列表
    getListData() {
      const vPar = new this.ParamArr()
      vPar.setInt('iStartRow', 0)
      vPar.setInt('iCountRow', 1000)
      let where = ''
      if (this.activeName !== '全部') {
        const fItem = this.typeList.filter(item => item.name === this.activeName)
        where += `where Type = '${fItem[0].id}'`
      }
      if (this.searchParams.keyWord) {
        const keyWord = this.searchParams.keyWord
        if (where) {
          where += ` and Title like '%${keyWord}%' or Content like '%${keyWord}%' or UserName like '%${keyWord}%'`
        } else {
          where += `where Title like '%${keyWord}%' or Content like '%${keyWord}%' or UserName like '%${keyWord}%'`
        }
      }

      vPar.setStr('where', where)
      getCommunityList(vPar).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumlist'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['type'] = table.getValueByName('Type')
          node['typeName'] = table.getValueByName('TypeName')
          node['createTime'] = table.getValueByName('CreateTime')
          node['lastTime'] = table.getValueByName('LastTime')
          node['createUser'] = table.getValueByName('CreateUser')
          node['userName'] = table.getValueByName('UserName')
          node['title'] = table.getValueByName('Title')
          node['content'] = table.getValueByName('Content')
          node['hot'] = table.getValueByName('Hot')
          node['replyNum'] = table.getValueByName('ReplyNum')
          node['collectNum'] = table.getValueByName('CollectNum')
          nodes.push(node)
          table.next()
        }
        this.allListData = nodes
        // 分页操作
        this.pagenation()
      })
    },
    // 分页操作
    pagenation() {
      this.pageData.pageNum = 1
      const allListData = this.allListData
      const pageNum = this.pageData.pageNum
      const pageSize = this.pageData.pageSize

      this.pageData.total = allListData.length // 经过筛选之后的数据总数

      // 显示数据
      this.listData = allListData.slice((pageNum - 1) * pageSize, pageNum * pageSize)

      this.pageData.sizeChange = (pageSize) => {
        this.listData = allListData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
      this.pageData.currentChange = (pageNum) => {
        if (allListData.length < this.pageData.pageSize) {
          return (this.pageData.pageNum = 1)
        }
        this.listData = allListData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
    },
    // 获取回帖周榜
    getUserHot() {
      RPAGetUserWeekly(new this.ParamArr()).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_weeklyusers'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['userName'] = table.getValueByName('UserName')
          node['replyNum'] = table.getValueByName('ReplyNum')
          nodes.push(node)
          table.next()
        }
        this.replyHotList = nodes
      })
    },
    // 获取本周热议
    getReplyHot() {
      RPAGetReplyWeekly(new this.ParamArr()).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_weeklyreply'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['title'] = table.getValueByName('Title')
          node['hot'] = table.getValueByName('Hot')
          node['replyNum'] = table.getValueByName('ReplyNum')
          nodes.push(node)
          table.next()
        }
        this.weekHotList = nodes
      })
    },
    // 去问题详情
    toDetail(e) {
      if (e.target.classList[0] === 'articleTitle') {
        const { id } = e.target.dataset
        id && this.$openUrl('QuestionDetail', {}, {}, { id })
      }
    },
    // 监听滚动事件
    wrapperScroll() {
      const scrollbarEl = this.$refs.wrapperScroll.wrap
      scrollbarEl.onscroll = () => {
        this.$refs.sticky.handleScroll()
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}
.page-title-wrap {
  padding: 40px 20px 18px;
  background-image: url('../../assets/user/Q&ACenter_img.png');
  background-repeat: no-repeat;
  background-size: 100% 150px;
  height: 150px;
  background-position: 0 0;
}
.page-title-wrap {
  display: flex;
}
.search-box {
  align-items: center;
  text-align: right;
  display: flex;
  justify-content: end;
  margin-top: 10px;
}

  .question-search-box {
    border-radius: 0;
    color: #414244;
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 14px;
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    &:hover {
      border: 1px solid #aaa;
    }
    input {
      flex-grow: 1;
      border: none;
      outline: none;
    }
  }
  .question-ask-btn {
    margin-left: 5px;
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 5px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    background-color: $primaryColor;
    border-radius: 2px;
  }
/*content样式*/
.page-content {
  display: flex;
  width: 80%;
  justify-content: space-between;
  margin:  0 auto;
  .el-row {
    width: 100%;
  }
}
ul {
  padding-left: 0;
  li {
    list-style: none;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #aaa;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}
.answerNum {
  width: 48px;
  height: 48px;
  background-color: #f4f5f5;
  font-size: 14px;
  color: #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.questionInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  >span {
    font-size: 13px;
    color: #b4c4d2;
  }
  .articleTitle {
    font-size: 15px;
    color: #333;
    margin-bottom: 10px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
::v-deep .el-carousel__container {
  height: 175px;
}
.hot-list {
  cursor: pointer;
}
.hot-list, .reply-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  font-size: 16px;
  .page-title {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-view {
    font-size: 14px;
    color: #b4c4d2;
  }
}
.reply-card, .hot-card {
  padding: 2px 10px;
  &:hover {
    box-shadow: 0px 0px 8px rgb(0 0 0 / 10%);
  }
}
.hot-pre {
  margin-right: 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: $plainColor;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}
::v-deep .el-tabs .el-tabs__item {
    font-size: 15px;
    // font-weight: bold;
}
::v-deep .m-input {
  border: none;
  input {
    border: none;
    padding: 0;
  }
}
</style>

